.messageBoard{
  width: 100%;
  .container{
    .page{
      align-self: flex-start;
      margin: .5rem auto 0;
      width: 75%;
      transition:all .5s;
      box-sizing: border-box;
      padding: .5rem .4rem;
      border-radius: 8px;
      background: $cardColor;
      box-shadow: 0 4px 8px 6px rgba(7,17,27,.06);
      hr{
        margin: .35rem 0 .2rem;
      }
      .msg-cloud-title {
        font-size: 2.57em;
      }
      .msgInfo {
        align-items: center;
        margin: .2rem 0;
        padding: 0 .2rem;
        .output{
          color: var(--fontColor, #2e2f34);
          font-size: 85%;
          line-height: 1.5;
          transition: all .2s;
          overflow-wrap: break-word;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
      }
      .SizeTiShi{
        color: #858585;
        display: block;
        margin: .1rem 0;
        margin-right: .2rem;
        text-align: right;
      }
      .msg-cloud-list a {
        display: inline-block;
        padding: 0 .1rem;
        transition: all .3s;
      }
      .msg-cloud-list a:hover{
        color:$fontColor!important;
        transform: scale(1.1);
      }
    }
    .page:hover{
      box-shadow: 0 4px 12px 12px rgba(7,17,27,.15);
    }
  }
}